import {Component, Input, OnInit, ViewChild} from '@angular/core';
import {ProgressBarService} from './progress-bar.service';
import {timer} from 'rxjs';

@Component({
  selector: 'ng-tools-progress-bar',
  templateUrl: './progress-bar.component.html',
  styleUrls: ['./progress-bar.component.scss']
})
export class ProgressBarComponent implements OnInit {
  @Input()
  progressBarOptions: {
    display: boolean;
    progress: number;
    height: number;
    bgColor?: string;
  };

  progressBarStripes = 'progress-bar-stripes 1s linear infinite';

  progressStyle;

  constructor(private progressBarService: ProgressBarService) {
    this.initProgressBar();
  }

  ngOnInit() {
    this.progressStyle = {
      'width': this.progressBarOptions.progress + '%',
      'background-color': this.progressBarOptions.bgColor,
      'animation': this.progressBarStripes
    };
  }

  private initProgressBar() {
    this.progressBarOptions = {
      display: true,
      progress: 0,
      height: 5,
      bgColor: '#ffa11b'
    };
  }

  start(timing: string, cubicBezier = 'cubic-bezier(0,1.08,1,.36)') {
    const animations = [];
    this.progressBarService.isCompleted = false;
    this.progressBarOptions.display = true;
    this.progressStyle.animation = '';
    animations.push(...[this.progressBarStripes, `loading ${timing} ${cubicBezier}`]);
    timer(0).subscribe(() => {
      this.progressStyle.animation = animations.join(',');
    });
  }

  complete() {
    this.progressBarOptions.display = false;
    this.progressBarService.isCompleted = true;
  }

}
